<template>
    <div class="app_data">
        <div class="title">
            <h2>动态爬取数据</h2>

        </div>
        <div class="update">
            <Form ref="formInline" :model="formLeft" :rules="formLeft" inline style="text-align: center;padding-top: 20px;">
                <FormItem prop="user">
                    <Select v-model="formLeft.city" style="width:200px" placeholder="请选择城市">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem prop="password">
                    <Select v-model="formLeft.pageSize" style="width:200px" placeholder="请选择爬取页数" default-label="2页">
                        <Option v-for="item in pageList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <br/>
                <FormItem>
                    <Button style="margin-right: 10px" type="primary" @click="handleSubmit0('formInline')">第一步：爬取数据</Button>
                    <Button style="margin-right: 10px" type="primary" @click="handleSubmit1('formInline')">第二步：上传数据</Button>
                    <Button style="margin-right: 10px" type="primary" @click="handleSubmit2('formInline')">第三步：清洗数据</Button>
                    <Button style="margin-right: 10px" type="primary" @click="handleSubmit3('formInline')">第四步：同步数据</Button>
                    <Button type="primary" @click="handleSubmit4('formInline')">第五步：更新数据</Button>
                </FormItem>
            </Form>
            <span style="padding: 0 0 10px 10px;">日志：</span>
            <Input :rows="20" style="margin: 0 10px 10px 10px;width: 99%" v-model="log" type="textarea" readonly/>
        </div>

    </div>
</template>
<script>
import {getJobData, getDict} from "../api";

export default {
    data() {
        return {
            formLeft: {
                username: localStorage.getItem('userName') || '',
                city: '',
                pageSize: ''
            },
            log: '',
            pageList: [
                {
                    value: 3,
                    label: '2页'
                },
                {
                    value: 6,
                    label: '5页'
                },
                {
                    value: 11,
                    label: '10页'
                },
                {
                    value: 16,
                    label: '15页'
                }
            ],
            cityList: []
        }
    },
    mounted() {
        this.getDict()
    },
    methods: {
        async getDict() {
            const res = await getDict()
            res.info.forEach(item => {
                const city = {}
                city.value = item.city_code
                city.label = item.city_name
                this.cityList.push(city)
            })
        },
        async handleSubmit0() {
            if (!this.formLeft.pageSize) {
                this.$Message.warning('请选择爬取页数!');
                return
            }
            this.log = ''
            const res = await getJobData(`username=${this.formLeft.username}&city=${this.formLeft.city}&pageSize=${this.formLeft.pageSize}&step=0`)
            this.log += res.info.replace('\[', '').replace("\\n\'", "\n").replace('/\]', '').replace(/\'|\t/g, "")
            this.log += "------------------------------\n"
        },
        async handleSubmit1() {
            const res = await getJobData(`username=${this.formLeft.username}&city=${this.formLeft.city}&pageSize=${this.formLeft.pageSize}&step=1`)
            this.log += res.info.replace('\[', '').replace("\\n\'", "\n").replace('/\]', '').replace(/\'|\t/g, "")
            this.log += "------------------------------\n"
        },
        async handleSubmit2() {
            const res = await getJobData(`username=${this.formLeft.username}&city=${this.formLeft.city}&pageSize=${this.formLeft.pageSize}&step=2`)
            this.log += res.info.replace('\[', '').replace("\\n\'", "\n").replace('/\]', '').replace(/\'|\t/g, "")
            this.log += "------------------------------\n"
        },
        async handleSubmit3() {
            const res = await getJobData(`username=${this.formLeft.username}&city=${this.formLeft.city}&pageSize=${this.formLeft.pageSize}&step=3`)
            this.log += res.info.replace('\[', '').replace("\\n\'", "\n").replace('/\]', '').replace(/\'|\t/g, "")
            this.log += "------------------------------\n"
        },
        async handleSubmit4() {
            const res = await getJobData(`username=${this.formLeft.username}&city=${this.formLeft.city}&pageSize=${this.formLeft.pageSize}&step=4`)
            this.log += res.info.replace('\[', '').replace("\\n\'", "\n").replace('/\]', '').replace(/\'|\t/g, "")
            this.log += "------------------------------\n"
        }
    }
}
</script>
<style>
.app_data {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 0 200px;
    font-family: "Open Sans", sans-serif;
    color: #444;
}

.title {
    margin: 4px auto;
    padding: 30px;
    text-align: center;
}

.title h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #5c768d;
}

.title span {
    font-size: 16px;
    color: #444;
    font-family: "Open Sans", sans-serif;
}

.update {
    background: #f5f9fc;
}
</style>
